{% extends 'base.html' %}
{% load static %}
{% block title %}小涛博客 - {{ blog.title }}{% endblock %}
{% block nav_blog_active %}active{% endblock %}

{% load staticfiles %}
{% load comment_tags %}
{% load likes_tags %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}"/>
    <link rel="stylesheet" href="{% static 'blog/css/blog.css' %}"/>
    <link rel="stylesheet" href="{% static 'highlight/styles/vs2015.css' %}">
{% endblock %}

{# 页面内容 #}
{% block content %}
    <div class="align-center align-middle" id="masthead" style="height: 426px;">
        <div class="blog-background" style="background-image: url('{% static 'images/blog-detail-bg.jpg' %}');"></div>
        <div class="inner"></div>
    </div>
    <div class="orther_body">
        <div class="container">
            <div class="row t_nav">
                <div class="col-md-4">
                    <a href="{% url 'home' %}" class="n1">网站首页</a>
                    <a href="{% url 'blog_list' %}" class="n2">文章列表</a>
                </div>
                <div class="col-md-8">
                    <span class="pull-right">时光飞逝，机会就在我们眼前，学会把握机遇。</span>
                </div>
            </div>
            <div class="row">
                <div class="col-md-9" style="background: #FFF;">
                    <div class="news">
                         <h3 class="title">{{ blog.title }}</h3>
                        <div class="title-info">
                            <ul class="blog-info-description">
                                <li><i class="fa fa-user"></i>&nbsp;小涛</li>
                                <li>
                                    <i class="fa fa-tags"></i>&nbsp;
                                    <a href="{% url 'blogs_with_tag' blog.blog_tag.pk %}">{{ blog.blog_tag }}</a>
                                </li>
                                <li><i class="fa fa-calendar"></i>&nbsp;{{ blog.created_time|date:"Y-m-d" }}</li>
                                <li><i class="fa fa-eye"></i>&nbsp;{{ blog.get_read_num }}&nbsp;人已阅读</li>
                            </ul>
                        </div>
                        <div class="blog-content">{{ blog.content|safe }}</div>
                        <div class="opera">
                            <div class="btn-like">
                                <span onclick="likeChange(this, '{% get_content_type blog %}', {{ blog.pk }})">
                                    <i class="fa fa-thumbs-o-up"></i>&nbsp;
                                    很赞哦！（{% get_like_count blog %}）
                                </span>
                            </div>
                            <div class="btn-dashang">
                                <p class="dasbox">
                                    <a href="javascript:void(0)" onclick="dashangToggle()" class="dashang" title="打赏，支持一下">
                                        <i class="fa fa-jpy"></i>&nbsp;打赏本站
                                    </a>
                                </p>
                            </div>
                            <div class="hide_box" style="display: none;"></div>
                            <div class="shang_box"> <a class="shang_close" href="javascript:void(0)" onclick="dashangToggle()" title="关闭">关闭</a>
                                <div class="shang_tit">
                                  <p>感谢您的支持，我会继续努力的!</p>
                                </div>
                                <div class="shang_payimg"> <img src="{% static 'blog/images/alipayimg.jpg' %}" alt="扫码支持" title="扫一扫"> </div>
                                <div class="pay_explain">扫码打赏，你说多少就多少</div>
                                <div class="shang_payselect">
                                  <div class="pay_item checked" data-id="alipay">
                                      <span class="radiobox"></span>
                                      <span class="pay_logo">
                                        <img src="{% static 'blog/images/alipay.jpg' %}" alt="支付宝">
                                      </span>
                                  </div>
                                  <div class="pay_item" data-id="weipay">
                                      <span class="radiobox"></span>
                                      <span class="pay_logo">
                                          <img src="{% static 'blog/images/wechat.jpg' %}" alt="微信">
                                      </span>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="blog-more">
                            <p>
                                {% if previous_blog %}
                                    上一篇：<a href="{% url 'blog_detail' previous_blog.pk %}" title="{{ next_blog.title }}">{{ previous_blog.title }}</a>
                                {% endif %}
                            </p>
                            <p>
                                {% if next_blog %}
                                    下一篇：<a href="{% url 'blog_detail' next_blog.pk %}" title="{{ next_blog.title }}">{{ next_blog.title }}</a>
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    <div class="comment-area panel panel-default" style="background-color: #FFF;">
                        <div class="panel-body" style="margin: 1rem;">
                            <div class="comment-area-title">
                                <span><i class="fa fa-comments"></i>&nbsp;发表评论</span>
                                <span class="jubao">
                                    <small><i class="fa fa-bullhorn"></i>&nbsp;请文明留言</small>
                                </span>
                            </div>
                            <form id="comment_form" method="POST" style="overflow:hidden">
                                {% comment %}<label class="nickname">{{ user.get_nickname_or_username }}，欢迎评论~</label>{% endcomment %}
                                <div id="reply_content_container" style="display:none;">
                                    <p id="reply_title">回复：</p>
                                    <div id="reply_content"></div>
                                </div>
                                {% csrf_token %}
                                {% get_comment_form blog as comment_form %}
                                {% for field in comment_form %}
                                    {{ field }}
                                {% endfor %}
                                <span id="comment_error" class="text-danger pull-left"></span>
                                <input type="submit" value="发表" class="btn btn-primary pull-right">
                            </form>
                            <div class="list_t_n" id="comment_point">共 <span class="c_t_n" id="comment_total_num">{% get_comment_count blog %}</span> 条评论</div>
                            <div id="comment_list">
                                {% get_comment_list blog as comments %}
                                {% for comment in comments %}
                                    <div id="root_{{ comment.pk }}" class="comment trunk">
                                        <span class="nickname">{{ comment.user.get_nickname_or_username }}</span>
                                        <span>（{{ comment.comment_time|date:"Y-m-d H:i:s" }}）：</span>
                                        <div class="tie-bdy" id="comment_{{ comment.pk }}">
                                            <div class="tie-cnt">
                                                <p>{{ comment.text|safe }}</p>
                                            </div>
                                        </div>
                                            <a class="reply_button pull-right" href="javascript:reply({{ comment.pk }});">回复</a>

                                        {% for reply in comment.root_comment.all %}
                                            <div class="reply trunk">
                                                <span class="nickname">{{ reply.user.get_nickname_or_username }}</span>
                                                <span>（{{ reply.comment_time|date:"Y-m-d H:i:s" }}）</span>
                                                <span>回复</span>
                                                <span class="nickname">{{ reply.reply_to.get_nickname_or_username }}：</span>
                                                <div class="tie-bdy" id="comment_{{ reply.pk }}">
                                                    <div class="tie-cnt">
                                                        <p>{{ reply.text|safe }}</p>
                                                    </div>
                                                </div>
                                                <a class="reply_button pull-right" href="javascript:reply({{ reply.pk }});">回复</a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% empty %}
                                    <h2 class="comment-text-center-new"><i class="fa fa-frown-o"></i>&nbsp;还没有评论，来说两句吧...</h2>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <!-- hot article -->
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-book"></i>&nbsp;热门文章</span>
                        </div>
                        <div class="panel-body">
                            <ul class="list-group">
                                {% for hot_blog in hot_blogs_for_7_days %}
                                    <li class="list-group-item hot-blogs">
                                        <span class="rank rank{{ forloop.counter }}">{{ forloop.counter }}</span>
                                        <a href="{% url 'blog_detail' hot_blog.id %}" title="{{ hot_blog.title }}">
                                            {{ hot_blog.title|striptags|truncatechars:24 }}
                                        </a>
                                    </li>
                                {% empty %}
                                    <li>暂无热门文章</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                    <!-- hot tag -->
                    <div class="panel panel-default cloud">
                        <div class="panel-heading">
                            <span class="panel-title"><i class="fa fa-tags"></i>&nbsp;热门标签</span>
                        </div>
                        <div class="panel-body">
                            <ul class="tag">
                                {% for blog_tag in blog_tags %}
                                    <a href="{% url 'blogs_with_tag' blog_tag.pk %}">
                                        {{ blog_tag.tag_name }} ({{ blog_tag.blog_count }})
                                    </a>
                                {% empty %}
                                    <li>暂无热门标签</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script_extends %}
    <script type="text/javascript" src="{% static 'highlight/highlight.pack.js' %}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
          $('pre code').each(function(i, block) {
            hljs.highlightBlock(block);
          });
        });
    </script>
    <script type="text/javascript">
        String.prototype.format = function(){
            var str = this;
            for (var i = 0; i < arguments.length; i++) {
                var str = str.replace(new RegExp('\\{' + i + '\\}', 'g'), arguments[i])
            };
            return str;
        }
        function reply(reply_comment_id){
            // 设置值
            $('#reply_comment_id').val(reply_comment_id);
            var html = $("#comment_" + reply_comment_id).html();
            $('#reply_content').html(html);
            $('#reply_content_container').show();

            $('html').animate({scrollTop: $('#comment_form').offset().top - 60}, 300, function(){
                CKEDITOR.instances['id_text'].focus();
            });
        }
        function numFormat(num){
            return ('00' + num).substr(-2);
        }
        function timeFormat(timestamp){
            var datetime = new Date(timestamp * 1000);
            var year = datetime.getFullYear();
            var month = numFormat(datetime.getMonth() + 1);
            var day = numFormat(datetime.getDate());
            var hour = numFormat(datetime.getHours());
            var minute = numFormat(datetime.getMinutes());
            var second = numFormat(datetime.getSeconds());
            return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
        }
        $("#comment_form").submit(function(){
            // 判断是否为空
            $("#comment_error").text('');
            if($("#id_text").val().trim()==''){
                $("#comment_error").text('评论内容不能为空');
                return false;
            }

            // 异步提交
            $.ajax({
                url: "{% url 'update_comment' %}",
                type: 'POST',
                data: $(this).serialize(),
                cache: false,
                success: function(data){
                    if(data['status']=="SUCCESS"){
                        if($('#reply_comment_id').val()=='0'){
                            // 插入评论
                            var comment_html = '<div id="root_{0}" class="comment trunk">' +
                                '<span class="nickname">{1}</span>' +
                                '<span>（{2}）：</span>' +
                                '<div class="tie-bdy" id="comment_{0}">' +
                                    '<div class="tie-cnt">' +
                                        '<p>{3}</p>' +
                                    '</div>' +
                                '</div>' +
                                '<a class="reply_button pull-right" href="javascript:reply({0});">回复</a>' +
                                '</div>';
                            comment_html = comment_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['text'], data['content_type']);
                            $("#comment_list").prepend(comment_html);
                        }else{
                            // 插入回复
                            var reply_html = '<div class="reply trunk">' +
                                        '<span class="nickname">{1}</span>' +
                                        '<span>（{2}）</span>' +
                                        '<span>回复</span>' +
                                        '<span class="nickname">{3}：</span>' +
                                        '<div class="tie-bdy" id="comment_{0}">' +
                                            '<div class="tie-cnt">' +
                                                '<p>{4}</p>' +
                                            '</div>' +
                                        '</div>' +
                                        '<a class="reply_button pull-right" href="javascript:reply({0});">回复</a>' +
                                    '</div>';
                            reply_html = reply_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['reply_to'], data['text'], data['content_type']);
                            $("#root_" + data['root_pk']).append(reply_html);
                        }
                        // 清空编辑框的内容
                        $("#id_text").val("");
                        $('#reply_content_container').hide();
                        $('#reply_comment_id').val('0');
                        $('#no_comment').remove();
                        $("#comment_error").text('评论成功');
                    }else{
                        // 显示错误信息
                        $("#comment_error").text(data['message']);
                    }
                },
                error: function(xhr){
                    console.log(xhr);
                }
            });
            return false;
        });
        // 点赞
        function likeChange(obj, content_type, object_id){
            var is_like = obj.getElementsByClassName('active').length == 0
            $.ajax({
                url: "{% url 'like_change' %}",
                type: 'GET',
                data: {
                    content_type: content_type,
                    object_id: object_id,
                    is_like: is_like
                },
                cache: false,
                success: function(data){
                    if(data['status']=='SUCCESS'){
                        // 更新点赞数量
                        var liked_num = $(obj.getElementsByClassName('liked-num'));
                        liked_num.text(data['liked_num']);
                    }else{
                        if(data['code']==400){
                            window.location.href = '{% url 'login' %}?from=/';
                        }else{
                            alert(data['message']);
                        }
                    }
                },
                error: function(xhr){
                    console.log(xhr)
                }
            });
        }

        if(window.location.hash){
            $('html').animate({
                scrollTop: $(window.location.hash).offset().top - 60
            }, 500);
        }


    $(function () {
        $(".pay_item").click(function(){
            $(this).addClass('checked').siblings('.pay_item').removeClass('checked');
            var dataid=$(this).attr('data-id');
            $(".shang_payimg img").attr("src","{% get_static_prefix %}blog/images/"+dataid+"img.jpg");
            $("#shang_pay_txt").text(dataid=="alipay"?"支付宝":"微信");
        });
    });

    function dashangToggle(){
        $(".hide_box").fadeToggle();
        $(".shang_box").fadeToggle();
    }
    </script>
{% endblock %}